/*
 * @Author: wuqiang
 * @Date: 2023-07-13 21:36:57
 * @LastEditors: wuqiang
 * @LastEditTime: 2023-11-16 04:04:31
 */
import React, { forwardRef, memo, useImperativeHandle, useState } from 'react'
import usePortal from 'react-useportal'
import './index.scss'

const NoticeModal = forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false)
  const { Portal } = usePortal()
  useImperativeHandle(ref, () => ({
    toggle: v => setVisible(v)
  }))

  if (!visible) return null

  return (
    <Portal>
      <div className="comp-notice-modal">
        
        <div className="insure_modal" onClick={(e) => {
          e.stopPropagation();
        }}>
          <div className='modal_header'>用户须知</div>
          <div className='body'>
            <p>
            尊敬的用户，本保障由中国人寿、中国太平、中国再保险集团，三家央企保险单位共同承保。
            </p>
            <p>特别提示</p>
            <p>2023年11月迎来全面升级，此次升级后由央企单位中国人寿作为主承保单位，中国太平，中再保险提供联合保障，保障层层加码确保长期、稳定、持续。</p>
            <p>此次产品升级</p>
            <p>1、将重疾医疗免赔额降为0元。</p>
            <p>2、新增重大疾病给付金。</p>
            <p>3、癌细胞清零特药，CAR-T疗法由一种增至两种。</p>
            <p>4、中国人寿提供专属医疗服务，开通专属优先理赔通道，为您提供更好的服务。</p>
            <p>5、升级异地转诊政策，保障升级保费不变。</p>
          </div>
          <div className="btn" onClick={() => setVisible(false)}>我已知晓</div>
        </div>
      </div>
    </Portal>
  )
})

export default memo(NoticeModal)
